import React, { Component } from 'react'
import Field from './Field'

export default class App extends Component {
  state = {
    username: '',
    password: '',
  }

  render() {
    return (
      <div>
        <h1>登录系统</h1>
        <Field
          label='用户名'
          type='text'
          value={this.state.username}
          onChangeEvent={(value) => this.setState({ username: value })}
        />
        <Field
          label='密码'
          type='password'
          value={this.state.password}
          onChangeEvent={(value) => this.setState({ password: value })}
        />
        <button onClick={() => this.handleLogin()}>登录</button>
        <button onClick={() => this.handleReset()}>重置</button>
      </div>
    )
  }

  handleLogin = () => {
    // 登录逻辑
    console.log(this.state)
  }

  handleReset = () => {
    // 重置逻辑
    this.setState(
      {
        username: '',
        password: '',
      },
      () => console.log(this.state)
    )
  }
}
